<template>
  <div class="page-user-list">
    <div class="search-container">
      <input v-model="realName" @confirm="reset" placeholder-class="placeholder" confirm-type="search" placeholder="微信/手机号/姓名">
      <div class="btn-search" @click="reset">搜索</div>
    </div>
    <scroll-view class="data-container" scroll-y @scrolltolower="loadData">
      <div class="user-wrap" @click="toSelect(data)" v-for="(data,index) in dataList" :key="index">
        <div class="user-head">
          <div class="real-name"><span class="top" v-if="data.isTop === 1">顶</span>{{data.realName}}<span>{{data.mobile}}</span></div>
          <div class="sales-name">录入人:{{data.salesName || "无"}}</div>
        </div>
        <div class="user-footer">
          <div class="wechat-no">微信号:<span>{{data.wechatNo || "无"}}</span></div>
          <div class="ctime">{{data.ctime}}</div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        page: 1,
        pageSize: 10,
        dataList: [],
        loading: false,
        realName: ""
      };
    },
    components: {},
    methods: {
      toSelect(data){
        App.selectUser = data;
        wx.navigateBack()
      },
      async reset() {
        this.page = 1;
        this.dataList = [];
        await this.loadData();
      },
      async loadData() {
        if (this.loading) {
          return false;
        }
        this.loading = true;
        wx.showLoading();
        const params = {
          page: this.page++,
          pageSize: this.pageSize
        };
        if (this.realName) {
          params.realName = this.realName;
        }
        const result = await wx.request({
          url: "/bg/userInfo/search",
          data: params
        });
        wx.hideLoading();
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            list.push(_.pick(data, [ "userId", "userInfoId", "isTop", "userTag", "userTagLevel", "realName", "mobile", "salesName", "wechatNo", "ctime" ]));
          });
          this.dataList = this.dataList.concat(list);
          this.loading = result.data.totalPage === result.data.page;
        } else {
          wx.showToast(result.message);
        }
      }
    },
    async onShareAppMessage(){
      await this.reset();
      wx.stopPullDownRefresh();
    },
    async mounted() {
      this.loadData();
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";
  .page-user-list {}
  .search-container {
    @include middle-center-x();
    top: 0;
    display: flex;
    align-items: center;
    width: pxToRem(750);
    height: pxToRem(120);
    padding: pxToRem(26) pxToRem(40);
    background-color: #F5F5F5;
    z-index: 1000;
    input {
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      margin-right: pxToRem(40);
      width: pxToRem(528);
      height: pxToRem(68);
      line-height: pxToRem(68);
      font-size: pxToRem(24);
      color: $main-color;
      background-color: #fff;
      border-radius: pxToRem(44);
    }
    .placeholder {
      color: #A7E2FD;
    }
    .btn-search {
      height: pxToRem(52);
      line-height: pxToRem(52);
      width: pxToRem(96);
      text-align: right;
      border-left: pxToRem(2) solid #E0E0E0;
      font-size: pxToRem(28);
      color: #44BDF5;
    }
  }

  .data-container {
    height: 100vh;
    width: pxToRem(750);
    padding-top: pxToRem(120);
    padding-left: pxToRem(40);
    padding-right: pxToRem(40);
    box-sizing: border-box;
    .user-wrap {
      padding-top: pxToRem(20);
      padding-bottom: pxToRem(20);
      border-bottom: pxToRem(1) solid rgba(68, 189, 245, 0.3);
      .user-head {
        position: relative;
        .real-name {
          display: flex;
          align-items: center;
          font-size: pxToRem(32);
          line-height: pxToRem(44);
          span {
            margin-left: pxToRem(20);
            font-size: pxToRem(28);
            color: #707070;
            line-height: pxToRem(40);
          }
          .top {
            margin-left: 0;
            margin-right: pxToRem(10);
            background-color: $main-color;
            width: pxToRem(44);
            line-height: pxToRem(44);
            text-align: center;
            border-radius: pxToRem(8);
            color: #fff;
          }
        }
        .sales-name {
          @include middle-center-y();
          right: 0;
          font-size: pxToRem(24);
          color: #707070;
        }
      }
      .user-footer {
        position: relative;
        padding-top: pxToRem(15);
        color: #707070;
        .wechat-no {
          font-size: pxToRem(28);
          span {
            margin-left: pxToRem(10);
          }
        }
        .ctime {
          @include middle-center-y();
          right: 0;
          font-size: pxToRem(24);
        }
      }
    }
  }
</style>
